<template>
  <div class="container">
    <div>基本属性</div>
    <div class="line"></div>
    <div class="flex_row">
      <div class="row">
        <div class="font"><span style="color: red">*</span>班级名称：</div>
        <div>
          <el-input
            v-model="info.className"
            placeholder="请输入学员姓名"
            clearable
            size="small"
          />
        </div>
      </div>
      <div class="row">
        <div class="font"><span style="color: red">*</span>班级类型：</div>
        <div>
          <el-select v-model="info.classType" placeholder="请选择班级类型">
            <el-option
              v-for="item in classList"
              :key="item.key"
              :label="item.value"
              :value="item.key"
            ></el-option>
          </el-select>
        </div>
      </div>
    </div>
    <div class="flex_row">
      <div class="row">
        <div class="font"><span style="color: red">*</span>开班时间：</div>
        <div>
          <el-input
            v-model="info.classStartTime"
            placeholder="请输入开班时间"
            clearable
            size="small"
          />
        </div>
      </div>
      <div class="row">
        <div class="font">毕业时间：</div>
        <div>
          <el-input
            v-model="info.classEndTime"
            placeholder="请输入毕业时间"
            clearable
            size="small"
          />
        </div>
      </div>
    </div>
    <!-- <div class="flex_row">
      <div class="row">
        <div class="font">
          报名人数：
        </div>
        <div>
          <el-input
              v-model="info.signUpNum"
              placeholder="请输入报名人数"
              clearable
              size="small"
            />
        </div>
      </div>
    </div> -->
    <div class="row">
      <div class="font">责任教员：</div>
      <div>
        <el-input
          v-model="info.teacher"
          placeholder="请输入责任教员"
          clearable
        />
      </div>
    </div>
    <div class="row">
      <div class="font">课程名称：</div>
      <div>
        <el-select
          v-model="courseNames"
          style="width: 950px"
          multiple
          placeholder="请选择班级类型"
        >
          <el-option
            v-for="item in courseList"
            :key="item.key"
            :label="item.value"
            :value="item.key"
          ></el-option>
        </el-select>
        <!-- <el-input
            style="width:950px"
            v-model="info.courseNames"
            placeholder="请输入课程名称"
            clearable
          /> -->
      </div>
    </div>
    <div class="row">
      <div class="font">做题类型：</div>
      <div>
        <el-checkbox-group v-model="checkList">
          <el-checkbox v-for="item in typeList" :label="item.key" :key="item.key">{{item.value}}</el-checkbox>
        </el-checkbox-group>
      </div>
    </div>
    <div class="stuTop">
      <div>学员属性</div>
      <div>
        <el-button type="primary" @click="add()">添加学员</el-button>
      </div>
    </div>
    <div class="line"></div>
    <div class="row">
      <el-table
        class="listTable"
        v-loading="listLoading"
        :data="list"
        border
        fit
        highlight-current-row
        style="width: 100%"
      >
        <el-table-column label="学员姓名">
          <template slot-scope="{ row }">
            <span>{{ row.studentName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="手机号码" align="center">
          <template slot-scope="{ row }">
            <span>{{ row.phonenumber }}</span>
          </template>
        </el-table-column>
        <el-table-column label="用户性别" align="center">
          <template slot-scope="{ row }">
            <span>{{ row.sex | sexMode }}</span>
          </template>
        </el-table-column>
        <el-table-column label="报考级别" align="center">
          <template slot-scope="{ row }">
            <span>{{ row.testLevel | levelMode }}</span>
          </template>
        </el-table-column>
        <el-table-column label="报考方向" align="center">
          <template slot-scope="{ row }">
            <span>{{ row.testDirection | directionMode }}</span>
          </template>
        </el-table-column>
        <el-table-column label="答题数" align="center">
          <template slot-scope="{ row }">
            <span>{{ row.answerNum }}</span>
          </template>
        </el-table-column>
        <el-table-column label="看视频数" align="center">
          <template slot-scope="{ row }">
            <span>{{ row.videoNum }}</span>
          </template>
        </el-table-column>
        <!-- <el-table-column label="理论时间" align="center">
          <template slot-scope="{ row }">
            <span>{{ row.theoreticalTime }}</span>
          </template>
        </el-table-column>
        <el-table-column label="实操时间" align="center">
          <template slot-scope="{ row }">
            <span>{{ row.operationTime }}</span>
          </template>
        </el-table-column> -->
        <el-table-column label="视频播放总时长(min)" align="center">
          <template slot-scope="{ row }">
            <span>{{ row.videoPlayTime }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="200">
          <template slot-scope="{ row }">
            <el-button
              type="primary"
              icon="el-icon-info"
              size="mini"
              @click="detail(row.userId)"
              >观看详情</el-button
            >
            <el-button
              type="danger"
              icon="el-icon-delete"
              size="mini"
              @click="handleDelete(row.userId)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="footers">
      <el-pagination
        :total="total"
        layout="total, prev, pager, next"
        :page-size="limit"
        :current-page.sync="curPage"
        @current-change="getList($event, id)"
        class="sortStyle"
      />
    </div>
    <div class="footer">
      <el-button @click="back()">返回</el-button>
      <el-button @click="edit()" type="primary">修改</el-button>
    </div>
    <el-dialog :visible.sync="addShow" title="添加学员" width="496px">
      <div class="row">
        <div><span style="color: red">*</span>学员姓名：</div>
        <el-select v-model="addStudent" multiple filterable  placeholder="请选择学员">
          <el-option
            v-for="item in studentArr"
            :key="item.key"
            :label="item.value + '（' + item.work + '）'"
            :value="item.key"
          ></el-option>
        </el-select>
      </div>
      <div class="backBtn">
        <el-button @click="goback">返回</el-button>
        <el-button type="primary" @click="submit()">添加</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getStudentList,
  classDetail,
  addStudents,
  courseList,
  delStudents,
  classEdit,
} from "@/api/system/user";
export default {
  components: {},
  filters: {
    sexMode: function (value) {
      switch (value) {
        case "0":
          return "男";
        case "1":
          return "女";
        case "2":
          return "未知";
      }
    },
    levelMode: function (value) {
      switch (value) {
        case "1":
          return "初级";
        case "2":
          return "中级";
        case "3":
          return "高级";
        case "4":
          return "技师（暂未开放）";
      }
    },
    directionMode: function (value) {
      switch (value) {
        case "1":
          return "监控方向";
        case "2":
          return "维保方向";
      }
    },
  },
  data() {
    return {
      typeList: [
        { key: 1, value: "课后作业" },
        { key: 2, value: "押题模考" },
        { key: 3, value: "结业考试" },
        { key: 4, value: "智能练习" },
      ],
      info: {},
      checkList: [],
      classList: [
        { key: "1", value: "初级" },
        { key: "2", value: "中级" },
        { key: "3", value: "高级" },
      ],
      courseList: [],
      list: [],
      limit: 10,
      total: 0,
      curPage: 1,
      listLoading: false,
      addShow: false,
      allList: [],
      addStudent: [],
      studentArr: [],
      courseNames: [],
      id: this.$route.query.id,
    };
  },
  created() {},
  mounted() {
    this.init(this.$route.query.id);
    this.getList(1, this.$route.query.id);
    this.getCourseList();
  },
  methods: {
    init(id) {
      classDetail(id).then((res) => {
        if (res.code == 200) {
          this.info = res.data;
          this.courseNames = res.data.courseIds;
          this.checkList = res.data.questionTypeIds
          // if (this.info.classType == '1') {
          //   this.info.classTypes = '初级'
          // } else if (this.info.classType == '2') {
          //   this.info.classTypes = '中级'
          // } else {
          //   this.info.classTypes = '高级'
          // }
        } else {
          this.$message({ message: res.msg, type: "error" });
        }
      });
    },
    detail(id) {
      this.$router.push({ path: "videoDetail", query: { userId: id } });
      // let params = {
      //   userId: id,
      // }
      // videoDetail(params).then(res => {
      //   if (res.code == '200') {
      //     this.$message({ message: res.msg, type: "success" });
      //     this.$router.push('classList')
      //   } else {
      //     this.$message({ message: res.msg, type: "error" });
      //   }
      // });
    },
    edit() {
      let params = {
        classId: this.$route.query.id,
        className: this.info.className,
        classType: this.info.classType,
        classStartTime: this.info.classStartTime,
        classEndTime: this.info.classEndTime,
        teacher: this.info.teacher,
        registrationChannel: this.info.registrationChannel,
        courseIds: this.courseNames,
        questionTypeIds: this.checkList
      };
      classEdit(params).then((res) => {
        if (res.code == "200") {
          this.$message({ message: res.msg, type: "success" });
          this.$router.push("classList");
        } else {
          this.$message({ message: res.msg, type: "error" });
        }
      });
    },
    handleDelete(id) {
      let temp = [];
      temp.push(id);
      let params = {
        studentIds: temp,
        classId: this.$route.query.id,
      };
      delStudents(params).then((res) => {
        if (res.code == "200") {
          this.$message({ message: res.msg, type: "success" });
          this.getList(1, this.$route.query.id);
        } else {
          this.$message({ message: res.msg, type: "error" });
        }
      });
    },
    getCourseList() {
      courseList().then((res) => {
        if (res.code == "200") {
          this.courseList = [];
          res.rows.forEach((element) => {
            let temp = {
              key: element.courseId,
              value: element.courseName,
            };
            this.courseList.push(temp);
          });
        } else {
          this.$message({ message: res.msg, type: "error" });
        }
      });
    },
    add() {
      this.addShow = true;
      this.studentArr = [];
      this.addStudent = "";
      let params = {
        delFlag: "3",
      };
      getStudentList(params).then((res) => {
        if (res.code == 200) {
          this.allList = res.rows;
          this.allList.forEach((element) => {
            let temp = {
              key: element.userId,
              value: element.studentName,
              work: element.work,
            };
            this.studentArr.push(temp);
          });
        } else {
          this.$message({ message: res.msg, type: "error" });
        }
      });
    },
    submit() {
      let params = {
        studentIds: this.addStudent,
        classId: this.$route.query.id,
      };
      addStudents(params).then((res) => {
        this.addShow = false;
        if (res.code == 200) {
          this.getList(1, this.$route.query.id);
          this.$message({ message: res.msg, type: "success" });
        } else {
          this.$message({ message: res.msg, type: "error" });
        }
      });
    },
    goback() {
      this.addShow = false;
    },
    handleSizeChange() {},
    getList(page, id) {
      let params = {
        pageNum: page,
        pageSize: this.limit,
        classId: id,
      };
      this.listLoading = true;
      getStudentList(params).then((res) => {
        this.listLoading = false;
        if (res.code == 200) {
          this.list = res.rows;
          this.total = res.total;
        } else {
          this.$message({ message: res.msg, type: "error" });
        }
      });
    },
    back() {
      this.$router.push("classList");
    },
  },
};
</script>
<style scoped>
.container {
  padding-left: 26px;
  padding-right: 24px;
  padding-top: 24px;
}
.row {
  display: flex;
  padding-bottom: 20px;
}
.line {
  height: 1px;
  background: #dcdfe6;
  width: 100%;
  margin-top: 6px;
  margin-bottom: 20px;
}
.row .font {
  width: 200px;
  text-align: right;
  margin-right: 20px;
}
.row .fonts {
  width: 300px;
  text-align: right;
  margin-right: 20px;
}
.flex_row {
  display: flex;
}
.footer {
  width: 540px;
  text-align: right;
  margin-top: 40px;
}
.footers {
  position: absolute;
  right: 26px;
}
.backBtn {
  text-align: center;
}
.stuTop {
  display: flex;
  justify-content: space-between;
}
</style>
